<template>
    <div class="login-wrap">
      <div class="innerwrap">
        <div class="ms-title">后台管理系统</div>
        <div class="ms-login">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
                <el-form-item prop="mobilenum">
                    <el-input v-model="ruleForm.mobilenum" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" show-password placeholder="请输入密码" v-model="ruleForm.password" @keyup.enter.native="login()"></el-input>
                </el-form-item>
                <el-form-item prop="captcha">
                  <div class="myitem">
                    <div>
                      <el-input type="text" placeholder="请输入验证码" v-model="ruleForm.captcha" @keyup.enter.native="login()"></el-input>
                    </div>
                    <div>
                      <img @click="changeImg" :src="codeUrl" alt="">
                    </div>
                  </div>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="login()">登录</el-button>
                </div>
                <!-- <p style="font-size:12px;line-height:30px;color:#999;">Tips : 请输入用户名和密码。</p> -->
            </el-form>
        </div>
      </div>
        
    </div>
</template>

<script>
import config from 'api/config'
import {adminLogin} from 'api/administratorManagement'
export default {
  data(){
    return {
      xx: 1,
      rules: {
        password: [
          { required: true, message: '请密码', trigger: 'blur' }
        ],
        mobilenum: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      random: Math.random(),
      serverUrl: config.serverUrl,
      ruleForm: {
        // mobilenum: '15280197109',
        // password: '123456',
        mobilenum: '',
        password: ''
      }
    }
  },
  computed: {
    codeUrl(){
      return this.serverUrl+ '/tour/admin/sysuser/getCode' + '?' + this.random
    }
  },
  methods: {
    changeImg(){
      this.random = Math.random()
    },
    login(){
      this.$refs['ruleForm'].validate().then(() => {
        adminLogin(this.ruleForm).then(res => {
          if(res){
            localStorage.setItem('userData', JSON.stringify(res.rData[0]))
            this.$router.push('/home')
          }else{
            this.changeImg()
          }
        }, () => {
          this.changeImg()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .myitem{
    display: flex;
    height: 40px;
    &>div:nth-child(1){
      flex: 1;
      margin-right: 10px;
    }
    &>div:nth-child(2){ 
      img{
        width: 127px;
        height: 40px;
      }
    }
  }
  .login-wrap{
      position: relative;
      width:100%;
      height:100%;
      background: #324157;
      @include flexCenter;
  }
  .ms-title{
      text-align: center;
      font-size:30px;
      color: #fff;
      margin-bottom: 30px;
  }
  .ms-login{
      width:300px;
      padding:40px;
      border-radius: 5px;
      background: #fff;
      box-sizing: content-box;
  }
  .login-btn{
      text-align: center;
  }
  .login-btn button{
      width:100%;
      height:36px;
  }
</style>